<template>
  <div class="top-wrap">
    <div class="left-wrap">
      <div>
        <span class="move-logo">{{ leftTitle || "大连金泰MOM" }}</span>
      </div>
    </div>

    <div class="center-wrap">
      <div class="title-msg">{{ title || "---" }}</div>
      <!-- <div class="title-con">PRODUCTION INFORMATION BOARD</div> -->
    </div>

    <div class="right-wrap">
      <div class="it-bg3">
        <div>
          <!-- <div class="nowTime">{{ nowWeek }}</div>
          <div class="nowDate">
            <span class="pr-[10px]">{{ classes }} </span>
            <span class="pr-[10px] text-[24px] lh-[18px]" v-show="showMonth"
              >{{ nowMonth }}W
            </span>
            {{ nowDate }}
            {{ nowTime }}
          </div> -->
          <div class="nowTime">
            <span class="nowTime1">{{ nowDate }} {{ nowTime }}</span>
            <!-- {{ nowWeek }} -->
            <svg-icon
              :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
              class="ml-[15px] text-[24px] c-#ceeaff full_icon"
              @click="toggle"
            />

            <svg-icon
              icon-class="back"
              class="ml-[13px] text-[26px] c-#ceeaff full_icon"
              @click="goBack"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import router from "@/router/index";

const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  showMonth: {
    type: Boolean,
    default: true,
  },
  leftTitle: {
    type: String,
    default: "",
  },
  classes: {
    type: String,
    default: "",
  },
});

function goBack() {
  router.go(-1);
}
/**
 * vueUse 全屏
 */
const { isFullscreen, toggle } = useFullscreen();

onMounted(() => {
  if (isFullScreenFn()) {
    toggle();
  }
});

function isFullScreenFn() {
  return !!(
    document?.fullscreenElement || // 标准API
    document?.webkitFullscreenElement || // Chrome, Safari and Opera
    document?.mozFullScreenElement || // Firefox
    document?.msFullscreenElement
  );
}

const { title, showMonth, classes, leftTitle } = toRefs(props);

const nowDate = ref();
const nowTime = ref();
const timer = ref();
const nowWeek = ref();
const nowMonth = ref();

timer.value = setInterval(() => {
  setNowTimes();
}, 0);

function setNowTimes() {
  let myDate = new Date();
  let wk = myDate.getDay();
  let yy = String(myDate.getFullYear());
  let mm = myDate.getMonth() + 1;
  let dd = String(
    myDate.getDate() < 10 ? "0" + myDate.getDate() : myDate.getDate()
  );
  let hou = String(
    myDate.getHours() < 10 ? "0" + myDate.getHours() : myDate.getHours()
  );
  let min = String(
    myDate.getMinutes() < 10 ? "0" + myDate.getMinutes() : myDate.getMinutes()
  );
  let sec = String(
    myDate.getSeconds() < 10 ? "0" + myDate.getSeconds() : myDate.getSeconds()
  );
  let weeks = [
    "星期日",
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六",
  ];
  let week = weeks[wk];
  nowDate.value = yy + "-" + mm + "-" + dd + "";
  nowTime.value = hou + ":" + min + ":" + sec;
  nowWeek.value = week;

  let firstDayOfYear = new Date(myDate.getFullYear(), 0, 1);
  let daysSinceFirstDay = Math.floor(
    (myDate - firstDayOfYear) / (24 * 60 * 60 * 1000)
  );
  let currentWeekNumber = Math.ceil(
    (daysSinceFirstDay + firstDayOfYear.getDay() + 1) / 7
  );
  nowMonth.value = currentWeekNumber;
}

onBeforeUnmount(() => {
  clearInterval(timer.value);
  timer.value = null;
});
</script>

<style lang="scss">
.top-wrap {
  display: flex;
  justify-content: space-between;
  margin: 0px;
  min-width: 100%;
  height: 100px;
  background-image: url(@/assets/images/screen/preview7.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  // background: linear-gradient(0deg, #111825, #151E29);

  .left-wrap {
    margin-left: 20px;
    display: flex;
    justify-content: left;
    align-items: center;
    width: 300px;

    .move-logo {
      font-size: 30px;
      // font-family: "DINPro";
      // font-weight: bold;
      // color: #ffffff;
      // letter-spacing: 2px;
      // filter: drop-shadow(rgba(0, 11, 27, 0.66) 1px 1px 6px)
      //   drop-shadow(#5f9fff 2px 1px 8px);
      margin-top: 0px;
      display: block;

      font-family: YOUSHE;
      writing-mode: horizontal-tb;
      word-spacing: 0px;
      letter-spacing: 0px;
      text-orientation: upright;
      color: transparent;
      background: linear-gradient(
          0deg,
          rgb(184, 207, 241) 0px,
          rgb(255, 255, 255) 100%
        )
        text;
      user-select: text;
    }
  }

  .center-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .title-msg {
      font-size: 50px;
      font-family: YOUSHE;
      // font-weight: bold;
      color: #ffffff;
      letter-spacing: 2px;
      margin-top: -10px;
      // filter: drop-shadow(rgba(0, 11, 27, 0.66) 1px 1px 6px)
      //   drop-shadow(rgb(95, 159, 255) 2px 1px 8px);

      // writing-mode: horizontal-tb;
      // word-spacing: 0px;
      // letter-spacing: 0px;
      // text-orientation: upright;
      // color: transparent;
      // background: linear-gradient(
      //     0deg,
      //     rgb(184, 207, 241) 0px,
      //     rgb(255, 255, 255) 100%
      //   )
      //   text;
      // user-select: text;

      writing-mode: horizontal-tb;
      // word-spacing: 0px;
      // letter-spacing: 8px;
      text-orientation: upright;
      color: rgb(255, 255, 255);
      filter: drop-shadow(rgba(0, 11, 27, 0.66) 1px 1px 6px)
        drop-shadow(rgb(95, 159, 255) 2px 1px 8px);
      user-select: text;
    }

    .title-con {
      font-size: 12px;
      font-family: DINPro;
      font-weight: normal;
      color: #ffffff;
      margin-top: 4px;
      letter-spacing: 1px;
      filter: drop-shadow(rgba(59, 59, 59, 0.66) 1px 1px 6px)
        drop-shadow(#5f9fff 2px 1px 8px);
    }
  }

  .right-wrap {
    display: flex;
    justify-content: right;
    align-items: center;
    width: 355px;

    .it-bg3 {
      // padding: 12px 10px;
      text-align: center;
      margin-right: 20px;
    }

    .nowTime {
      font-size: 20px;
      // font-family: DINPro;
      // font-weight: bold;
      color: #ceeaff;
      text-align: right;
      font-family: YOUSHE;
    }
    .nowTime1 {
      font-size: 28px;
      font-family: DINPro;
      font-weight: bold;
      color: #ceeaff;
      text-align: right;
    }

    .nowDate {
      margin-top: 0px;
      font-size: 24px;
      font-family: DINPro;
      // font-weight: bold;
      color: #ceeaff;
      text-align: right;
    }
  }
}
</style>
